<template>
  <div class="share-person">
    <div class="close" @click="close">
      <van-icon name="cross" />
    </div>
    <div class="content" ref="addImage" v-if="!dataURL">
      <img class="logo"
        src="../../assets/img/logo-blue.png"
        alt
      />
      <!-- <span
        style="font-size: 0.28rem;  position: absolute;top: 0.3rem; left: 1rem;color: white;font-family: 'bodoni mt';"
      >巨服中国</span> -->
      <div id="text">
        <div id="imgbox" :style="{backgroundImage:`url(${detail.imgFile.uriPath})`}"></div>
        <div class="share-user">
          <p class="name">{{detail.name}}</p>
          <p class="job">{{detail.empEnterprise}}</p>
        </div>
      </div>
      <div :src="ewm" class="ewm" alt id="ewm"></div>
      <img class="share-tip-img" src="../../assets/img/share_bg.png" alt />
    </div>
    <img class="result" :src="dataURL" alt />
    <div id="codeJoin"></div>
    <p class="tips">提示:长按图片保存到本地相册</p>
    <div class="loading" v-if="!dataURL">
      <van-loading size="24px" vertical>生成中...</van-loading>
    </div>
  </div>
</template>

<script>
import api from "../../api/api.js";
import html2canvas from "html2canvas";
import { QRCode } from "utils/qrcode";
export default {
  data() {
    return {
      dataURL: "",
      firstFlag: true,
      my: "",
      ewm: "",
      ShareCode: "",
      money: "",
      me: {
        avatarFile: { uriPath: "" }
      }
    };
  },
  props: ["detail"],
  created() {
    this.getData();
    // this.getMe();
  },
  mounted() {},
  methods: {
    close() {
    
      if(this.$route.params.share){

      }else{
          this.$emit("close");
      }
    },
    getMe() {
      api.myIndex().then(res => {
        this.me = res.data;
      });
    },
    clickGeneratePicture() {
      setTimeout(() => {
        const opts = {
          y: window.scrollY,
          backgroundColor: "transparent",
          useCORS: true, // 允许跨域
          allowTaint: false
        };
        html2canvas(this.$refs.addImage, opts).then(canvas => {
          let dataURL = canvas.toDataURL("image/png");
          this.dataURL = dataURL;
          if (this.dataURL !== "") {
          }
        });
        this.$toast("海报已生成");
      }, 1000);
    },
    getData() {
      api.getShareQR().then(res => {
        this.$nextTick(() => {
          var qrHtml = document.getElementById("ewm");
          console.log(qrHtml);
          var qr = new QRCode("codeJoin", {
            text: window.location.href + "?share=" + res.data.ShareCode,
            width: 128,
            height: 128,
            colorDark: "#000000",
            colorLight: "#ffffff"
          });
          qrHtml.appendChild(qr._el.childNodes[1]);
          document.getElementById("codeJoin").innerHTML = "";
          this.clickGeneratePicture();
        });
      });
    }
  }
};
</script>

<style lang="scss">
.share-person {
  background-color: rgba($color: #fff, $alpha: 1);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  .close{
    position: absolute;
    right: .2rem;
    top:.2rem;
    font-size: .36rem;
  }
  .loading {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    z-index: 99;
  }
  .content {
    width: 6.4rem;
    height: 7.2rem;
    margin: 0 auto;
    position: relative;
    .logo{
      position: absolute;
      right: .3rem;
      top: .3rem;
      width: .47rem;
      display: block;
    }
    #text{
      display: flex;
      padding: .7rem .3rem;
      border-bottom:1px solid #eee;
      text-align: left;
      #imgbox{
        flex:none;
        width: 1.02rem;
        height: 1.02rem;
        border-radius:50%;
        background-size: cover;
        margin-right: .2rem;
      }
      .share-user{
      
        .name{
          font-size: .36rem;
          color: #111;
        }
        .job{
          font-size: .32rem;
          color: #999;
        }
      }
    }
    .ewm{
      width: 2.25rem;
      margin: .45rem auto;
      img{
        width: 100%;
      }
    }
    .share-tip-img{
      width: 2.25rem;
      margin: 0 auto;
      padding-bottom: .45rem;
    }
  }
  .result {
    width: 6.4rem;
    margin: 0 auto;
    margin-top: 1rem;
    box-shadow: #f5f5f5 2px 2px 5px;
  }
  .tips {
    color: #000;
    font-size: 0.32rem;
    margin-top: 0.5rem;
  }
}
</style>
